<script setup name="Person" lang="ts">
import {computed, ref} from "vue";

// 使用ref创建响应式姓氏和名字变量
let firstName = ref('zhang');
let lastName = ref('san');

// 使用computed创建一个响应式全名，同时支持获取和设置全名
let fullName = computed( {
  get(){
    // 获取全名时，将姓氏和名字首字母大写连接
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
  },
  set(val){
    // 设置全名时，根据"-"分割并更新姓氏和名字
    const [str1, str2] = val.split('-');
    firstName.value = str1;
    lastName.value = str2;
  }
});

// 定义一个用于更改全名的函数
function changeFullName() {
  // 直接设置fullName的值，这将触发set函数更新姓和名
  fullName.value = 'li-si';
}

</script>

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    <button @click="changeFullName">将全名改为li-si</button>
    <br>
    全名：<span>{{ fullName}}</span><br>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>
